<template>
  <a-modal
    v-model:visible="visible"
    width="80%"
    title="打款详情"
    draggable
    :body-style="{ height: '500px', overflow: 'hidden', overflowY: 'scroll' }"
    @before-ok="onOk"
  >
    <a-row justify="center">
      <a-col :span="16">
        <div class="card_wrap" v-if="detailInfo.inviteCode">
          <div class="flex flex-a-c flex-j-a">
            <dl class="dl_wrap dl_1 flex-1">
              <dt class="text-size-18 font-bold">佣金金额：￥{{ detailInfo.withdrawalAmount }}元</dt>
              <dd>邀请码：{{ detailInfo.inviteCode }} 手机号：{{ detailInfo.mobile }}</dd>
              <dd>申请时间：{{ detailInfo.withdrawalTime }}</dd>
            </dl>
            <dl
              class="dl_wrap dl_2 flex-1"
              :class="detailInfo.withdrawalAccountInfo.withdrawalMethod == 1 ? 'dl_2' : 'dl_3'"
            >
              <dt class="text-size-18 font-bold">
                提现账号：{{ detailInfo.withdrawalAccountInfo.withdrawalMethod == 1 ? '支付宝' : '银行卡' }}
              </dt>
              <dd>账号：{{ detailInfo.withdrawalAccountInfo.withdrawalAccount }}</dd>
              <dd>姓名：{{ detailInfo.withdrawalAccountInfo.withdrawalName }}</dd>
            </dl>
          </div>
          <!-- <div class="mt-30 pay_wrap">
            <p class="text-size-14">打款账号选择：</p>
            <a-form direction="vertical" :model="form" size="small" class="form my-10">
              <a-form-item field="paymethod1" hide-label>
                <a-radio-group v-model="form.paymethod1">
                  <a-radio value="1">小额打款</a-radio>
                  <a-radio value="2">灵活用工</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="paymethod2" hide-label>
                <a-radio-group direction="vertical" v-model="form.paymethod2">
                  <template v-for="item in payMethods2[form.paymethod1]" :key="item">
                    <a-radio :value="item.id">
                      <template #radio="{ checked }">
                        <a-space
                          align="start"
                          class="custom-radio-card flex-a-c"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot" />
                          </div>
                          <div>
                            <div className="custom-radio-card-title">{{ item.account }}</div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group></a-form-item
              >
            </a-form>
          </div> -->
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { financeDetail, financeAllPaymentMethods, financeHandlPay } from '@/apis'

defineOptions({ name: 'financePay' })

const emit = defineEmits(['getTableData'])

const visible = ref(false)
const ids = ref([])
const payMethods2 = ref([])
const detailInfo = ref({
  inviteCode: '',
  mobile: '', //手机号码
  withdrawalAmount: '',
  receiveAmount: '',
  withdrawalTime: '',
  receiveTime: '',
  withdrawalNo: '',
  alipayTradeId: '',
  withdrawalAccountInfo: {
    withdrawalMethod: '',
    withdrawalName: '',
    withdrawalAccount: ''
  },
  payAccountInfo: [],
  status: '',
  statusName: '',
  id: ''
})
const form = reactive({
  paymethod1: '', // 打款方式
  paymethod2: '' // 打款ID
})

const getDetail = async (params) => {
  const res = await financeDetail(params)
  detailInfo.value = res.data
  console.log(detailInfo.value)
} // 获取单个详情

const openModal = (item) => {
  visible.value = true
  getDetail({ id: item.id })
}

const mapArrow = (arr, prop) => {
  const grouped = Object.create(null)
  arr.map((item) => {
    const key = item[prop]
    if (!grouped[key]) {
      grouped[key] = []
    }
    grouped[key].push(item)
  })
  return grouped
}
const getPayMethods = async () => {
  const res = await financeAllPaymentMethods()
  payMethods2.value = mapArrow(res.data.list, 'method')
  console.log(payMethods2.value)
}
getPayMethods()
// 点击确认排序
const onOk = async () => {
  await financeHandlPay({
    paymentMethodId: form.paymethod2,
    // receiveAccountId: detailInfo.value.withdrawalAccountInfo.withdrawalAccount,
    userBalanceWithdrawalId: detailInfo.value.id
  })
  Message.success('操作成功')
  emit('getTableData')
  return true
}

defineExpose({ openModal })
</script>
<style lang="scss" scoped>
.card_wrap {
  .pay_wrap {
    margin: $margin;
  }
  .dl_wrap {
    border-radius: 10px;
    padding: $margin;
    margin: $margin;
    color: #414141;
    dt {
      line-height: 2;
    }
    dd {
      line-height: 1.5;
    }

    &.dl_1 {
      background: rgba(227, 60, 100, 0.09);
      dt {
        color: rgba(255, 50, 114, 1);
      }
    }
    &.dl_2 {
      background: rgba(237, 246, 255, 1);
      position: relative;
      z-index: 2;
      dt {
        color: #3e3e3e;
        position: relative;
        z-index: 2;
      }
      dd {
        position: relative;
        z-index: 2;
      }
      &:after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        content: '';
        background: url('https://images.maishou88.com/admin/buyer_circle_sc/20230925/20230925152938_4396.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 83px;
        height: 83px;
        z-index: 0;
        opacity: 0.3;
      }
    }
    &.dl_3 {
      background: rgba(238, 238, 238, 1);
      position: relative;
      z-index: 2;
      dt {
        color: rgba(80, 80, 80, 1);
      }
      dd {
        position: relative;
        z-index: 2;
      }
      &:after {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translate(0%, -50%);
        content: '';
        background: url('https://images.maishou88.com/admin/buyer_circle_sc/20230925/20230925153849_8160.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 83px;
        height: 83px;
        z-index: 0;
        opacity: 0.3;
      }
      //
    }
  }
  .custom-radio-card {
    padding: 5px 16px;
    border: 1px solid var(--color-border-2);
    width: 300px;
    box-sizing: border-box;
  }

  .custom-radio-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked {
    background-color: var(--color-primary-light-1);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
}
</style>
